<template>
  <div class="moneyPending-page">
    <h3>待放款列表</h3>
    <AreaWarp :padding="true">
      <SearchWarp :label="'用户姓名'">
        <el-input v-model.trim="searchInfo.realname" placeholder="请输入用户姓名"></el-input>
      </SearchWarp>
      <SearchWarp :label="'手机号'">
        <el-input v-model.trim="searchInfo.mobile" maxlength="11" placeholder="请输入手机号码"></el-input>
      </SearchWarp>
      <SearchWarp :label="'待打款金额'">
        <el-input
          class="inputWidth"
          v-model.trim="searchInfo.loanMoneyBegin"
          maxlength="11"
          placeholder="起始金额"
        ></el-input>-
        <el-input
          class="inputWidth"
          v-model.trim="searchInfo.loanMoneyEnd"
          maxlength="11"
          placeholder="结束金额"
        ></el-input>
      </SearchWarp>
      <SearchWarp :label="'审核通过时间'">
        <el-date-picker
          v-model="searchInfo.auditTime"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :editable="false"
        ></el-date-picker>
      </SearchWarp>
      <BtnWarp>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
      </BtnWarp>
    </AreaWarp>

    <AreaTitleWarp :title="'待放款列表'">
      <el-button v-if="remitShow" type="primary" icon @click="dakuan">打款</el-button>
      <el-button type="primary" @click="Refresh">刷新</el-button>
      <el-button v-if="exportShow" type="primary" @click="exportDown">导出</el-button>
    </AreaTitleWarp>

    <!--搜索结果区域-->
    <AreaWarp :padding="false" v-loading="getWaitLoanListLoading">
      <el-table
        size="mini"
        :data="tableInfo.list"
        style="width: 100%"
        class="pub-table"
        header-row-class-name="pub-table-header-row"
        header-cell-class-name="pub-table-header-cell"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="borrowId" label="订单ID"></el-table-column>
        <el-table-column prop="realname" label="姓名"></el-table-column>
        <el-table-column prop="mobile" label="手机号" min-width="120"></el-table-column>
        <el-table-column prop="cardNo" label="卡号" min-width="120"></el-table-column>
        <el-table-column prop="bankName" label="银行" min-width="120"></el-table-column>
        <el-table-column prop="realCapital" label="待打款金额"></el-table-column>
        <el-table-column
          prop="auditTime"
          label="审核通过时间"
          min-width="150"
          :formatter="formatter_timeYMDHMS"
        ></el-table-column>
        <el-table-column v-if="remitShow" label="操作" min-width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="makeMoney(scope.row)">打款</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total,sizes,prev, pager, next, jumper"
        class="pub-page"
        :current-page="searchInfo.page"
        :page-sizes="[20,50,100]"
        :page-size="searchInfo.size"
        :total="tableInfo.total"
        @current-change="search"
        @size-change="handleSizeChange"
      ></el-pagination>
    </AreaWarp>
    <el-dialog
      title="打款操作"
      v-if="prepareLoanData"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="money">
        <ul class="money-ul">
          <li class="money-li">
            <div class="li-title">打款金额:</div>
            <div class="li-text">{{ prepareLoanData.loanMoney }}</div>
          </li>
          <li class="money-li">
            <div class="li-title">收款人:</div>
            <div class="li-text">{{ prepareLoanData.realname }}</div>
          </li>
          <li class="money-li">
            <div class="li-title">卡号:</div>
            <div class="li-text">{{ prepareLoanData.cardNo }}</div>
          </li>
          <li class="money-li">
            <div class="li-title">银行:</div>
            <div class="li-text">{{ prepareLoanData.bankName }}</div>
          </li>
          <li class="money-li">
            <div class="li-title">打款备注:</div>
            <div class="li-text">产品名称-出借人</div>
          </li>
        </ul>
      </div>
      <div class="money-time">
        <div class="time-title">打款时间:</div>
        <el-date-picker v-model="payTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="commitLoan(prepareLoanData)">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="打款操作"
      :visible.sync="batchDialogVisible"
      width="50%"
      :before-close="handlebatchClose"
      :close-on-click-modal="false"
    >
      <div class="money-time">
        <div class="time-title">打款时间:</div>
        <el-date-picker v-model="payTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handlebatchClose">取 消</el-button>
        <el-button type="primary" @click="commitLoan()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getTimestamp } from "../../../assets/js/time";
export default {
  data() {
    return {
      searchInfo: {
        realname: "",
        mobile: "",
        loanMoneyBegin: "",
        loanMoneyEnd: "",
        auditTime: "",
        page: 1,
        size: 20
      },
      getWaitLoanListLoading: false,
      tableInfo: {
        list: [],
        size: 20,
        page: 1,
        total: 0
      },
      dialogVisible: false,
      prepareLoanData: null, //打款操作数据回显
      payTime: "", //打款时间
      listSelection: [],
      batchDialogVisible: false,
      auditTimeBegin: "",
      auditTimeEnd: "",
      remitShow: false,
      exportShow: false,
      idList:[]
    };
  },
  methods: {
    //改变每页显示多少条
    handleSizeChange(val) {
      let that = this;
      that.searchInfo.size = val;
      that.searchInfo.page = 1;
      that.search();
    },
    //搜素数据
    search(currentPage) {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;
      let reqData = that.filter_parameter(that.searchInfo);
      if (!reqData) {
        return;
      }
      that.getWaitLoanListLoading = true;
      that.ajaxJson({
        url: "/finance/getWaitLoanList",
        data: reqData,
        success: function(data) {
          if (data.code == "0") {
            that.tableInfo = data.data;
          }
          that.getWaitLoanListLoading = false;
        }
      });
    },
    //重置按钮
    reset() {
      let that = this;
      that.searchInfo = {
        realname: "",
        mobile: "",
        loanMoneyBegin: "",
        loanMoneyEnd: "",
        auditTime: "",
        page: 1,
        size: 20
      };

      that.search();
    },
    //刷新
    Refresh() {
      let that = this;
      that.search();
    },
    exportDown(row) {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;
      let reqData = that.filter_parameter(that.searchInfo);
      if (!reqData) {
        return;
      }

      let idList = [];
      that.listSelection.forEach(function(item, index) {
        idList.push(item.borrowId);
      });

      let realname = that.searchInfo.realname ? that.searchInfo.realname : null;
      let mobile = that.searchInfo.mobile ? that.searchInfo.mobile : null;
      let loanMoneyBegin = that.searchInfo.loanMoneyBegin
        ? that.searchInfo.loanMoneyBegin
        : null;
      let loanMoneyEnd = that.searchInfo.loanMoneyEnd
        ? that.searchInfo.loanMoneyEnd
        : null;
      let auditTimeBegin = that.auditTimeBegin ? that.auditTimeBegin : null;
      let auditTimeEnd = that.auditTimeEnd ? that.auditTimeEnd : null;
      idList = idList ? idList : null;

      let url =
        that.host +
        "/finance/getWaitLoanList/export?page=" +
        that.searchInfo.page +
        "&size=" +
        that.searchInfo.size +
        "&appId=" +
        that.$store.state.id;
      if (realname != null) {
        url += "&realname=" + realname;
      }
      if (mobile != null) {
        url += "&mobile=" + mobile;
      }
      if (loanMoneyBegin != null) {
        url += "&loanMoneyBegin=" + loanMoneyBegin;
      }
      if (loanMoneyEnd != null) {
        url += "&loanMoneyEnd=" + loanMoneyEnd;
      }
      if (auditTimeBegin != null) {
        url += "&auditTimeBegin=" + auditTimeBegin;
      }
      if (auditTimeEnd != null) {
        url += "&auditTimeEnd=" + auditTimeEnd;
      }
      if (idList != null) {
        url += "&idList=" + idList;
      }
      window.open(url);
    },
    //打开弹框
    makeMoney(row) {
      let that = this;
      that.ajaxJson({
        url: "/finance/prepareLoan",
        data: {
          borrowId: row.borrowId
        },
        success: function(data) {
          if (data.code == "0") {
            that.prepareLoanData = data.data;
            that.dialogVisible = true;
          }
        }
      });
    },
    //关闭弹框
    handleClose() {
      let that = this;
      that.payTime = "";
      that.dialogVisible = false;
    },
    //批量操作打款
    dakuan(row) {
      let that = this;
      if (that.listSelection.length == 0) {
        that.showMsg("请至少选择一条打款记录", "error");
        return;
      }
      that.batchDialogVisible = true;
    },
    //批量取消关闭
    handlebatchClose() {
      let that = this;
      that.payTime = "";
      that.batchDialogVisible = false;
      that.listSelection = [];
      that.$refs.multipleTable.clearSelection();
    },
    //确认打款
    commitLoan(row) {
      let that = this;
      let time = "";
      if (!that.payTime) {
        that.showMsg("请选择打款时间", "error");
        return;
      } else {
        time = that.payTime.getTime();
      }

      let selectList = [];

      if (row) {
        selectList.push(row.borrowId);
      } else {
        that.listSelection.forEach(function(item, index) {
          selectList.push(item.borrowId);
        });
      }
      console.log(selectList, "selectList");
      that.ajaxJson({
        url: "/finance/commitLoan",
        data: {
          borrowIds: selectList,
          payTime: time
        },
        success: function(data) {
          if (data.code == "0") {
            that.showMsg("已打款", "success");
          } else {
            that.showMsg("打款失败", "error");
          }
          that.payTime = "";
          that.dialogVisible = false;
          that.batchDialogVisible = false;
          that.search();
        }
      });
    },
    //过滤条件
    filter_parameter(obj) {
      let that = this;
      let x = {};
      //姓名
      if (obj.realname) {
        x.realname = obj.realname;
      }
      //手机号
      if (obj.mobile) {
        if (!that.isMobile(obj.mobile)) {
          that.showMsg("请输入正确的手机号", "error");
          return;
        } else {
          x.mobile = obj.mobile;
        }
      }
      //打款金额
      if (obj.loanMoneyBegin) {
        if (!/^[0-9]*$/.test(obj.loanMoneyBegin)) {
          that.showMsg("请输入正确的起始金额", "error");
          return;
        } else {
          x.loanMoneyBegin = obj.loanMoneyBegin;
        }
      }
      if (obj.loanMoneyEnd) {
        if (!/^[0-9]*$/.test(obj.loanMoneyEnd)) {
          that.showMsg("请输入正确的结束金额", "error");
          return;
        } else {
          x.loanMoneyEnd = obj.loanMoneyEnd;
        }
      }
      if (obj.loanMoneyBegin && obj.loanMoneyEnd) {
        if (Number(obj.loanMoneyBegin) >= Number(obj.loanMoneyEnd)) {
          that.showMsg("起始金额不得大于结束金额", "error");
          return;
        }
      }
      //审核时间
      if (obj.auditTime) {
        x.auditTimeBegin = obj.auditTime
          ? getTimestamp(obj.auditTime[0])
          : undefined;
        x.auditTimeEnd = obj.auditTime
          ? getTimestamp(obj.auditTime[1]) + 86399999
          : undefined;

        that.auditTimeBegin = x.auditTimeBegin;
        that.auditTimeEnd = x.auditTimeEnd;
      }

      x.size = obj.size;
      x.page = obj.page;

      return x;
    },
    handleSelectionChange(val) {
      let that = this;
      that.listSelection = [];
      that.listSelection = val;
    },
    isRemitShow() {
      let that = this;
      let isRemitShow = that.urlPermissions().indexOf("/finance/commitLoan");
      if (isRemitShow == "-1") {
        that.remitShow = false;
      } else {
        that.remitShow = true;
      }
    },
    isExportShow() {
      let that = this;
      let isExportShow = that
        .urlPermissions()
        .indexOf("finance/getWaitLoanList/export");
      if (isExportShow == "-1") {
        that.exportShow = false;
      } else {
        that.exportShow = true;
      }
    }
  },
  created() {
    let that = this;
    Promise.all([that.isExportShow(), that.isRemitShow()]).then(arr => {
      that.search();
    });
  }
};
</script>
<style lang="less">
.moneyPending-page {
  .inputWidth {
    width: 120px;
  }
  .money {
    border-bottom: 1px dashed #ccc;
    padding-bottom: 20px;
    .money-ul {
      width: 100%;
      padding: 0;
      margin: 0;
      .money-li {
        display: flex;
        line-height: 30px;
        .li-title {
          flex: none;
          width: 120px;
          line-height: 30px;
          color: #333;
        }
        .li-text {
          flex: 1;
          line-height: 30px;
          color: #999;
        }
      }
    }
  }
  .money-time {
    padding: 20px 0 0;
    display: flex;
    .time-title {
      flex: none;
      width: 120px;
      line-height: 40px;
    }
  }
}
</style>
